<template>
	<view class="bing-bar" :class="[customClass, theme]" :style="themeStyle + style">
		<view class="bar-wrapper" v-for="(tab, index) in data">
			<view
				class="bing-bar__item"
				:style="{
					height: itemSize + 'rpx',
					width: index === value ? 3 * itemSize + 'rpx' : itemSize + 'rpx',
					margin: '0 20rpx'
				}"
				@tap="handleActive(index)"
				:class="{ selected: index === value }"
			>
				<text class="text">{{ tab.name }}</text>
				<view class="bing-bar__item-icon">
					<text class="icon" :class="[tab.icon]"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// --text-color:#fff;
// --theme-color:#5B37B7;
// --shadow-color:#5B37B75c;

// --text-color:#000;
// --theme-color:#bcf75c;
// --shadow-color:#bcf75c5c;

export default {
	props: {
		value: {
			type: Number,
			default: 0
		},
		style: {
			type: String
		},
		color: {
			type: String,
			default: '#0000fc'
		},
		theme: {
			type: String,
			default: 'light'
		}
	},
	data() {
		return {
			itemSize: 90,
			activeIndex: 0,

			data: [
				{
					name: '首页',
					icon: 'tn-icon-home'
				},
				{
					name: '打卡签到',
					icon: 'tn-icon-hotspot'
				},
				{
					name: '数据统计',
					icon: 'tn-icon-my-circle'
				}
			]
		};
	},
	computed: {
		themeStyle() {
			return `
				--bg-color:${this.theme == 'dark' ? '#000' : '#fff'};
				--text-color:${this.theme == 'dark' ? '#fff' : '#000'};
				--icon-color:${this.theme == 'dark' ? '#fff' : '#000'};
				--theme-color:${this.color};
				--shadow-color:${this.color}5C;
			`;
		}
	},
	methods: {
		handleActive(index) {
			setTimeout(() => {
				this.activeIndex = index;
			}, 100);
			this.$emit('change', index);
		}
	}
};
</script>

<style lang="scss">
.bing-bar {
	border-radius: 1000rpx;
	background-color: var(--bg-color);
	box-sizing: content-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;
	box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 0.3);
	left: 50%;
	transform: translateX(-50%);
	position: fixed;
	bottom: calc(10rpx + env(safe-area-inset-bottom));
	.bar-wrapper {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	&.dark {
		.selected {
			background-image: linear-gradient(101.53deg, var(--theme-color) 0, rgba(255, 255, 255, 0) 100%);
		}
	}
	&.light {
		.bing-bar__item {
			background-color: #fff;
			box-shadow: none;
		}
		.selected {
			box-shadow: 0px 0px 0px 4px var(--shadow-color);
			background-color: var(--theme-color);
			.text,
			.icon {
				color: #fff;
			}
		}
	}

	&__item {
		border-radius: 1000rpx;
		background-color: rgb(20, 20, 20);
		border: none;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 0px 0px 4px var(--shadow-color);
		cursor: pointer;
		transition-duration: 0.3s;
		overflow: hidden;
		position: relative;
		color: var(--text-color);
		.bing-bar__item-icon {
			color: var(--icon-color);
			.icon {
				font-size: 48rpx;
				font-weight: 100;
			}
		}
		&.selected {
			border-radius: 80rpx;
			transition-duration: 0.3s;
			align-items: center;
			.bing-bar__item-icon {
				transition-delay: 0.3s;
				transition-duration: 0.5s;
				transform: translateY(-200%);
			}
			.text {
				font-size: 28rpx;
				opacity: 1;
				bottom: unset;
				transition-delay: 0.3s;
				transition-duration: 0.3s;
			}
		}

		& .text {
			position: absolute;
			bottom: -20px;
			color: var(--text-color);
			font-size: 0px;
		}
	}
}
</style>
